<template>
	<div class="idx">
		<div class="banner">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			  <van-swipe-item>
					<img style="width: 100%;" src="@/assets/shouye/banner.png" alt="">
				</van-swipe-item>
				<van-swipe-item>
					<img style="width: 100%;" src="@/assets/shouye/banner.png" alt="">
				</van-swipe-item>
				<van-swipe-item>
					<img style="width: 100%;" src="@/assets/shouye/banner.png" alt="">
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="notice">
			<div class="notice_top">
				<div class="notice_top_left">
					<img src="../assets/shouye/gg.png" alt="">
				</div>
				<div class="notice_top_right">
					<van-notice-bar background="white" color="black" :scrollable="false">
					  <van-swipe
					    vertical
					    class="notice-swipe"
					    :autoplay="3000"
					    :show-indicators="false"
					  >
					    <van-swipe-item>技术是开发它的人的共同灵魂。</van-swipe-item>
					    <van-swipe-item>技术是开发它的人的共同灵魂。</van-swipe-item>
					    <van-swipe-item>技术是开发它的人的共同灵魂。</van-swipe-item>
					  </van-swipe>
					</van-notice-bar>
				</div>
			</div>
			<ul class="notice_bottom">
				<li>
					<router-link to="/selective">
						<div class="tubiao">
							<img src="@/assets/shouye/jixuan.png" alt="">
						</div>
						<p style="margin-top: 10px;">快速机选</p>
					</router-link>
				</li>
				<li>
					<router-link to="/">
						<div class="tubiao">
							<img src="@/assets/shouye/zoushi.png" alt="">
						</div>
						<p style="margin-top: 10px;">往期走势</p>
					</router-link>
				</li>
				<li>
					<router-link to="/store">
						<div class="tubiao">
							<img src="@/assets/shouye/shangchang.png" alt="">
						</div>
						<p style="margin-top: 10px;">彩民商城</p>
					</router-link>
				</li>
				<li>
					<router-link to="/discounts">
						<div class="tubiao">
							<img src="@/assets/shouye/youhui.png" alt="">
						</div>
						<p style="margin-top: 10px;">优惠券</p>
					</router-link>
				</li>
			</ul>
		</div>
		<div class="kind">
			<p class="kind_title">彩种推荐</p>
			<div class="kind_union">
				<li style="background-color: #FFEEEE;">
					<router-link to="/union">
						<div class="kind_qiu">
							<div class="qiu_item">
								<img src="@/assets/shouye/shuangse.png" alt="">
							</div>
							<div class="qiu_p" style="color: #F86354;">
								<p class="qiu_p1">双色球</p>
								<p class="qiu_p2">60.0%彩民选择</p>
							</div>
							<div class="goumai" style="background-color: #ED3220;">
								<span>购买</span>
							</div>
						</div>
					</router-link>
				</li>
				<li style="background-color: #D5EBFF;">
					<router-link to="/fucai3d">
						<div class="kind_qiu">
							<div class="qiu_item">
								<img src="@/assets/shouye/fucai.png" alt="">
							</div>
							<div class="qiu_p" style="color: #1991FA;">
								<p class="qiu_p1">福彩3D</p>
								<p class="qiu_p2">60.0%彩民选择</p>
							</div>
							<div class="goumai" style="background-color: #1991FA;">
								<span>购买</span>
							</div>
						</div>
					</router-link>
				</li>
				<li style="background-color: #F6F0FF;">
					<router-link to="/qicai">
						<div class="kind_qiu">
							<div class="qiu_item">
								<img src="@/assets/shouye/qicai.png" alt="">
							</div>
							<div class="qiu_p" style="color: #8446E8;">
								<p class="qiu_p1">七乐彩</p>
								<p class="qiu_p2">60.0%彩民选择</p>
							</div>
							<div class="goumai" style="background-color: #8548E8;">
								<span>购买</span>
							</div>
						</div>
					</router-link>
				</li>
			</div>
		</div>
		<div class="go">
			<img src="../assets/shouye/guanggao.png" alt="">
		</div>
		<div class="message">
			<p class="kind_title">开奖信息<span class="gengduo" @click="gokjxinxi">更多<van-icon name="arrow" /></span></p>
			<van-tabs v-model="active">
			  <van-tab title="双色球">
					<router-link to="/runlottery">
						<div class="box_jix">
							<div class="jix_title">
								<div class="title_name">第021006期开奖数据</div>
								<div class="title_time">2021/01/12</div>
							</div>
							<div class="jix_ball">
								<div class="ball_left">
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu_lan"><span>08</span></div>
								</div>
							</div>
						</div>
					</router-link>
				</van-tab>
			  <van-tab title="福彩3D">
					<router-link to="/runlottery">
						<div class="box_jix">
							<div class="jix_title">
								<div class="title_name">第021006期开奖数据</div>
								<div class="title_time">2021/01/12</div>
							</div>
							<div class="jix_ball">
								<div class="ball_left">
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
								</div>
							</div>
						</div>
					</router-link>
				</van-tab>
			  <van-tab title="七彩乐">
					<router-link to="/runlottery">
						<div class="box_jix">
							<div class="jix_title">
								<div class="title_name">第021006期开奖数据</div>
								<div class="title_time">2021/01/12</div>
							</div>
							<div class="jix_ball">
								<div class="ball_left">
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
									<div class="qiuqiu"><span>08</span></div>
								</div>
							</div>
						</div>
					</router-link>
				</van-tab>
			</van-tabs>
		</div>
		<div class="zixun">
			<p class="kind_title">资讯<span class="gengduo" @click="gozixun">更多<van-icon name="arrow" /></span></p>
			<ul class="zixun_list">
				<li>
					<div class="list_left">
						<p style="font-weight:500">技术是开发它的人的共同灵魂。</p>
						<span class="left_time">2021/02/31</span>
					</div>
					<div class="list_right">
						<img src="../assets/shouye/banner.png" alt="">
					</div>
				</li>
				<li>
					<div class="list_left">
						<p style="font-weight:500">技术是开发它的人的共同灵魂。</p>
						<span class="left_time">2021/02/31</span>
					</div>
					<div class="list_right">
						<img src="../assets/shouye/banner.png" alt="">
					</div>
				</li>
				<li>
					<div class="list_left">
						<p style="font-weight:500">技术是开发它的人的共同灵魂。</p>
						<span class="left_time">2021/02/31</span>
					</div>
					<div class="list_right">
						<img src="../assets/shouye/banner.png" alt="">
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { NoticeBar } from 'vant';
	  export default {
	    name: "HelloWorld",
			data(){
				return {
					active:0
				}
			},
			created() {
				this.banner()
			},
			methods:{
				banner(){
					this.$axios.get('http://a.chuxingcai.com/prod-api/webapi/ad/list?placeId=1',{
						
					}).then((res) => {
						console.log(res)
					})
				},
				gokjxinxi(){
					this.$router.push('/runlottery')
				},
				gozixun(){
					this.$router.push('/activity')
				}
			}
	  }
</script>

<style scoped>
	a { text-decoration: none}
	a:link { text-decoration: none;color: black}
	a:active { text-decoration:none;color: black}
	a:hover { text-decoration:none;color: black}
	a:visited { text-decoration: none;color: black}
	*{margin: 0;padding: 0;}
	.idx{
		width: 100%;
		background-color: #F6F6F6;
		overflow: hidden;
	}
	.goumai{
		width: 50px;
		height: 20px;
		font-size: 10px;
		position: absolute;
		text-align: center;
		line-height: 20px;
		border-radius: 20px;
		left: 50%;
		bottom: 3px;
		color: white;
		transform: translate(-50%,0);
	}
	.banner{
		width: 95%;
		margin: 10px auto;
		border-radius: 10px;
		background-color: white;
		overflow: hidden;
		height: 120px;
	}
	.notice{
		width: 95%;
		margin: 10px auto;
		border-radius: 10px;
		background-color: white;
		height: 150px;
	}
	.kind{
		width: 95%;
		margin: 10px auto;
		border-radius: 10px;
		height: 150px;
		background-color: white;
		position: relative;
	}
	.go{
		width: 95%;
		margin: 10px auto;
		background-color: white;
		height: 90px;
	}
	.go>img{
		width: 100%;
		height: 100%;
	}
	.message{
		width: 95%;
		margin: 10px auto;
		border-radius: 10px;
		background-color: white;
		height: 170px;
	}
	.zixun{
		width: 95%;
		margin: 10px auto;
		border-radius: 10px;
		background-color: white;
	}
	.my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    text-align: center;
	}
	.notice_top{
		width: 90%;
		margin:0 auto;
		height: 40px;
		border-bottom: 1px solid #e1e1e1;
		display: flex;
	}
	.notice_top_left{
		margin-top: 5px;
		margin-left: 10px;
		width: 45px;
		height: 20px;
		line-height: 40px;
	}
	.notice_top_left>img{
		width: 100%;
		height: 100%;
	}
	.notice_top_right{
		line-height: 40px;
		width: 100%;
		height: 50%;
		margin-left: 10px;
		font-size: 13px;
	}
	.notice-swipe {
	    height: 40px;
	    line-height: 40px;
	  }
	.notice_bottom{
		width: 100%;
		height: 100px;
		display: flex;
	}
	.notice_bottom>li{
		margin-top: 20px;
		flex: 1;
		/* border: 1px solid red; */
		text-align: center;
	}
	.tubiao{
		width: 50px;
		height: 50px;
		/* border: 1px solid red; */
		margin: 0 auto;
	}
	.tubiao>img{
		width: 100%;
		height: 100%;
	}
	.kind_title{
		font-size: 20px;
		width: 95%;
		padding-top: 10px;
		font-weight: 600;
		margin-left: 10px;
		position: relative;
	}
	.gengduo{
		position: absolute;
		top: 50%;
		right: 10px;
		color: #8b8b8b;
		font-size: 13px;
		font-weight: 500;
		transform: translate(0,-50%);
	}
	.kind_union{
		width: 98%;
		height: 100px;
		margin: 10px auto;
		/* border: 1px solid red; */
		justify-content: space-around;
		display: flex;
	}
	.kind_union>li{
		flex: 0.32;
		height: 80px;
		/* border: 1px solid red; */
		position: relative;
		border-radius: 5px;
		list-style: none;
	}
	.kind_qiu{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.qiu_item{
		margin-top: 10px;
		width: 30px;
		min-width: 30px;
		height: 30px;
		margin-left: 3px;
	}
	.qiu_item>img{
		width: 100%;
		height: 100%;
	}
	.zixun_list{
		margin-top: 10px;
	}
	.zixun_list>li{
		width: 95%;
		height: 80px;
		/* border: 1px solid red; */
		margin: 10px;
		justify-content: space-around;
		display: flex;
	}
	.list_left{
		flex: 0.58;
		/* border: 1px solid red; */
		margin-top: 5px;
		height: 70px;
		position: relative;
	}
	.list_right{
		flex: 0.38;
		margin-top: 5px;
		height: 70px;
	}
	.list_right>img{
		width: 100%;
		height: 100%;
	}
	.left_time{
		position: absolute;
		bottom: 0;
		font-size: 12px;
	}
	.qiu_p{
		margin-top: 6px;
		margin-left: 3px;
	}
	.qiu_p1{
		font-size: 16px;
	}
	.qiu_p2{
		font-size: 10px;
	}
	.box_jix{
		width: 93%;
		margin: 10px auto;
		position: relative;
	}
	.box_jix_check{
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translate(0,-50%);
	}
	.box_jix_p{
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translate(0,-50%);
	}
	.jix_pji{
		font-size: 20px;
	}
	.jix_psj{
		font-size: 10px;
		color: #999999;
	}
	.jix_title{
		width: 95%;
		height: 25px;
		margin: 0 auto;
		display: flex;
	}
	.title_name{
		flex: 2;
		font-size: 15px;
	}
	.title_time{
		flex: 1;
		font-size: 13px;
		color: #999999;
	}
	.jix_ball{
		width: 95%;
		height: 50px;
		margin: 0 auto;
		position: relative;
	}
	.ball_left{
		display: flex;
		padding-top: 10px;
	}
	.qiuqiu{
		margin-right: 7px;
		width: 30px;
		height: 30px;
		background-color: #F74A4B;
		border-radius: 50%;
		position: relative;
	}
	.qiuqiu>span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.qiuqiu_lan{
		margin-left: 15px;
		width: 30px;
		height: 30px;
		background-color: #5555ff;
		border-radius: 50%;
		position: relative;
	}
	.qiuqiu_lan>span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
</style>
